<template>
  <div class="hjr-input-wrapper">
    <input
      :class="inputClasses"
      :type="type"
      :value="modelValue"
      :placeholder="placeholder"
      :disabled="disabled"
      :readonly="readonly"
      @input="handleInput"
      @focus="handleFocus"
      @blur="handleBlur"
    />
  </div>
</template>

<script>
export default {
  name: 'HjrInput',
  props: {
    modelValue: {
      type: [String, Number],
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    },
    placeholder: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'medium',
      validator: (value) => ['small', 'medium', 'large'].includes(value)
    }
  },
  computed: {
    inputClasses() {
      return [
        'hjr-input',
        `hjr-input--${this.size}`,
        {
          'hjr-input--disabled': this.disabled,
          'hjr-input--readonly': this.readonly
        }
      ]
    }
  },
  methods: {
    handleInput(event) {
      this.$emit('update:modelValue', event.target.value)
      this.$emit('input', event.target.value)
    },
    handleFocus(event) {
      this.$emit('focus', event)
    },
    handleBlur(event) {
      this.$emit('blur', event)
    }
  }
}
</script>

<style scoped>
.hjr-input-wrapper {
  display: inline-block;
  width: 100%;
}

.hjr-input {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  transition: all 0.2s ease-in-out;
  outline: none;
  font-family: inherit;
}

.hjr-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.hjr-input::placeholder {
  color: #999;
}

/* 尺寸 */
.hjr-input--small {
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.5;
}

.hjr-input--medium {
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.5;
}

.hjr-input--large {
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.5;
}

/* 状态 */
.hjr-input--disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

.hjr-input--disabled:focus {
  border-color: #ddd;
  box-shadow: none;
}

.hjr-input--readonly {
  background-color: #f9f9f9;
  color: #666;
}
</style>
